<template>
	<view class="x-coupon" v-if="list && list.length">
		<view class="" v-if="option.title && option.title.length" style="padding:.4rem;border-left: 2px solid #fc7592;margin-bottom: 4upx;">
			{{option && option.title}}
		</view>
		<scroll-view scroll-x>
			<view class="coupon_wrap u-flex-row">
				<view class="coupon" :class="item.user_coupon ? 'bg-gray' : 'bg-red'" v-for="(item,index) in list" :key="index">
					<view class="corner" v-if="item.stock != -1">剩{{item.stock}}张</view>
					<view class="corner" v-else>数量充足</view>
					<view class="coupon_content u-block">
						<view class="coupon_left u-block">
							<view class="u-block">
								<view class="coupon_value u-block">
									<text class="coupon_yen">¥</text>
									{{item.money}}
								</view>
								<view class="coupon_limit">满{{item.order_min_amount}}元可用</view>
								<view class="coupon_desc" style="-webkit-line-clamp: 2;">
									{{item.name}}
								</view>
							</view>
						</view>
						<view class="coupon_right disabled" v-if="item.user_coupon">
							<view class="coupon_action">已领取</view>
						</view>
						<view class="coupon_right" @tap="addCoupon(item, index)" v-else>
							<view class="coupon_action">立即领取</view>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Refresh from '@/mixins/refresh';
	export default {
		mixins: [Refresh],
		name: 'shop-coupon',
		data() {
			return {
				list: []
			}
		},
		props: {
			option: {}
		},
		mounted() {
			if (this.$tools.has_addon('shopcoupon')) this.init();
		},
		methods: {
			init() {
				return new Promise((resolve,reject) => {
					this.$http.post('shopcoupon/api/coupon/list', {count: this.option.count}).then(data => {
						this.list = data;
					})
				})
			},
			refreshHandle() {
				return this.init();
			},
			addCoupon(item, index) {
				if (!this.user.id) {
					uni.navigateTo({
						url: '/pages/public/login'
					}) 
				} else {
					this.$http.post('/shopcoupon/api/coupon/addCoupon', {id: item.code}).then(data => {
						this.$set(this.list[index], 'user_coupon', data);
					})
				}
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.x-coupon {
		position: relative;
		margin-top: .5rem;
		background: #fff;
		border-radius: .2rem;
		// margin: 0 auto;
		// min-width: 320px;
		// max-width: 540px;
		background: #fff;
		font-size: 14px;
		line-height: 1.5;
		color: #666;
		-webkit-text-size-adjust: 100% !important;
	}

	.coupon_wrap {
		white-space: nowrap;
		height: 5.25rem;
	}

	.coupon_wrap .coupon {
		display: inline-block;
		white-space: normal;
		width: 7.425rem;
		height: 5.25rem;
		background-size: 100% 100%;
		border-radius: .2rem;
		position: relative;
		margin-right: -.4rem;
	}
		
		.bg-red {
			background: url() no-repeat;
		}
		.bg-gray {
			background: url() no-repeat;
		}

	.coupon_wrap .coupon_content {
		position: absolute;
		top: .3rem;
		left: 0;
		width: 100%;
	}

	.coupon_wrap .coupon_content .coupon_left {
		height: 4.75rem;
		width: 5rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin-left: .35rem;
		float: left;
		text-align: center;
	}

	.coupon_wrap .coupon_content .coupon_left .coupon_value {
		font-size: 1.1rem;
		color: #f2270c;
		line-height: 1.1rem;
		margin-top: .35rem;
	}

	.coupon_wrap .coupon_content .coupon_left .coupon_value .coupon_yen {
		font-size: .75rem;
	}

	.coupon_wrap .coupon_content .coupon_left .coupon_limit {
		margin-top: .05rem;
		font-size: .6rem;
		color: #333;
		line-height: .6rem;
	}

	.coupon_wrap .coupon_content .coupon_left .coupon_desc {
		margin-top: .2rem;
		font-size: .45rem;
		color: #999;
		line-height: .7rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		width: 4.8rem;
	}

	.coupon_wrap .coupon_content .coupon_right {
		height: 4.75rem;
		width: 1.7rem;
		float: left;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.coupon_wrap .coupon_content .coupon_right .coupon_action {
		font-size: .7rem;
		color: #fff;
		width: .75rem;
		font-weight: 700;
		line-height: .9rem;
	}

	.coupon_wrap .corner {
		position: absolute;
		height: .9rem;
		top: .4rem;
		left: .4rem;
		font-size: .4rem;
		color: #fff;
		line-height: .7rem;
		text-align: center;
		z-index: 1;
		padding: 1px .125rem;
		font-weight: 700;
		border-radius: .275rem 0 .3rem 0;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#f33d25), to(#ff8f57));
		background-image: -webkit-linear-gradient(top, #f33d25, #ff8f57);
		background-image: linear-gradient(180deg, #f33d25, #ff8f57);
		white-space: nowrap;
	}
	
	.disabled .coupon_action {
		color: #555!important;
	}
	
	
</style>
